<template>
  <wd-toast></wd-toast>
  <view class="login">
    <view class="login-main">
      <text class="login-main-title">你好,</text>
      <view class="login-main-subtitle">欢迎进入小田模版</view>
      <view class="login-main-body">
        <wd-input type="text" v-model="username" clearable placeholder="请输入登录手机号" :maxlength="20"></wd-input>
        <view class="login-password">
          <wd-input type="text" v-model="password" show-password clearable placeholder="请设置登录密码"
            :maxlength="20"></wd-input>
          <wd-input type="text" class="mt40rpx" v-model="password1" show-password clearable placeholder="请再次输入密码"
            :maxlength="20"></wd-input>
        </view>
        <wd-button size="large" class="submit-btn" block type="primary" :disabled="disabled"
          @click="doLogin">注册</wd-button>
      </view>
    </view>
  </view>

</template>

<script lang="ts" setup>
import DemoApi from '@/api/DemoApi'
// import LoginInput from './cmp/LoginInput.vue'
import { useToast } from 'wot-design-uni/components/wd-toast'

const username = ref<string>('') // 用户名
const password = ref<string>('') // 密码
const password1 = ref<string>('') // 密码
const toast = useToast()
const { userInfo, useTyz } = storeToRefs(useAuthStore()) // 解构pinia的store
const router = useRouter() // 路由

// 登录按钮是否禁用
const disabled = computed(() => {
  return !username.value || !password.value
})

// 登录接口
function doLogin() {
  if (!username.value.trim()) {
    toast.error('请输入手机号')
    return
  }
  if (!password.value.trim()) {
    toast.error('请输入密码')
    return
  }
  if (!password1.value.trim()) {
    toast.error('请再次输入密码')
    return
  }
  if (password.value !== password1.value) {
    toast.error('两次密码不一致')
    return
  }
  if (password.value.length < 6) {
    toast.error('密码长度不能小于6位')
    return
  }
  toast.loading({ loadingType: 'ring', msg: '注册中' })
  setTimeout(() => {
    toast.close()
    toast.success('注册成功')
    router.replaceAll({ name: 'home' })
  }, 2000)
  // DemoApi.login()
  //   .then((resp) => {
  //     toast.close()
  //     toast.success('登录成功')
  //     userInfo.value = resp.data
  //
  //   })
  //   .catch((error) => {
  //     toast.close()
  //     toast.error(error.msg)
  //   })
}

const openAddMer = () => {
  console.log('====================================');
  console.log(111111);
  console.log('====================================');
  router.push({ name: 'addMer' })
}

</script>

<style lang="scss" scoped>
.login {
  font-family: PingFangSC-Regular, PingFang SC;
  background-color: #ffffff;
  height: calc(100vh - var(--window-top));
  width: 100vw;
  box-sizing: border-box;

  &-main {
    padding: 112rpx 75rpx 0 75rpx;
    position: relative;

    &-title {
      display: flex;
      align-items: center;
      height: 64rpx;
      font-size: 64rpx;
      font-weight: 600;
      // color: $color-text-secondary;
      line-height: 64rpx;
      letter-spacing: 8rpx;
    }

    &-subtitle {
      font-size: 28rpx;
      color: #303030;
      font-weight: bold;
      // color: $color-text-thirdly;
      line-height: 40rpx;
      margin: 15rpx 0 104rpx;
    }

    &-body {
      position: relative;
      box-sizing: border-box;
      width: 600rpx;
      height: 648rpx;

      .login-password {
        position: relative;
        padding: 40rpx 0 104rpx;
      }

      .submit-btn {
        border-radius: 0 !important;
        //background: #1A66FF !important;
      }

      .regUser {
        margin-top: 20rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 26rpx;
        font-weight: 600;
        color: #406afd;
      }

      .addMer {
        margin-top: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        font-weight: 600;
        color: #406afd;
      }
    }
  }

  &-footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    // height: 300rpx;
    text-align: center;
    line-height: 28rpx;
    font-size: 20rpx;
    font-weight: 500;

    .login-tipsBox {
      .login-tipsTop {
        color: #646466;
      }

      .login-tipsBottom {
        color: #646466;
      }
    }
  }
}
</style>
